<template>
  <div class="bottom-tab">
    <span class="tab-item" @click="switchTo('/home')">
        <img :src=" $route.path.includes('/home') ? tabBarImageArr[0].selected : tabBarImageArr[0].normal" alt="">
        <span :class="{on:$route.path.includes('/home')}">首页</span>
    </span>
    <span class="tab-item" @click="switchTo('/recommend')">
        <img :src="$route.path.includes('/recommend') ? tabBarImageArr[3].selected : tabBarImageArr[3].normal" alt="">
        <span :class="{on:$route.path.includes('/recommend')}">推荐</span>
    </span>
    <span class="tab-item" @click="switchTo('/search')">
        <img :src="$route.path.includes('/search') ? tabBarImageArr[2].selected : tabBarImageArr[2].normal" alt="">
        <span :class="{on:$route.path.includes('/search')}">搜索</span>
    </span>
    <span class="tab-item" @click="switchTo('/chat')">
        <img :src="$route.path.includes('/chat') ? tabBarImageArr[1].selected : tabBarImageArr[1].normal" alt="">
        <span :class="{on:$route.path.includes('/chat')}">聊天</span>
    </span>
    <span class="tab-item" @click="switchTo('/me')">
        <img :src="$route.path.includes('/me') ? tabBarImageArr[4].selected : tabBarImageArr[4].normal" alt="">
        <span :class="{on:$route.path.includes('/me')}">我的</span>
    </span>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {
        tabBarImageArr:[
            {normal:require('./../../../static/img/icon_home.png'),selected:require('./../../../static/img/icon_home_selected.png')},
            {normal:require('./../../../static/img/icon_chat.png'),selected:require('./../../../static/img/icon_chat_selected.png')},
            {normal:require('./../../../static/img/icon_search.png'),selected:require('./../../../static/img/icon_search_selected.png')},
            {normal:require('./../../../static/img/icon_intro.png'),selected:require('./../../../static/img/icon_intro_selected.png')},
            {normal:require('./../../../static/img/icon_mine.png'),selected:require('./../../../static/img/icon_mine_selected.png')},
        ]
    }
  },
  methods:{
      switchTo(path){
        //   console.log(this.$route);
        this.$router.replace(path)
          
      }
  },
  components: {

  }
}
</script>

<style scoped lang="stylus">
    .bottom-tab
        width 100%
        height 50px
        position fixed
        background-color #fff
        left 0
        bottom 0
        display flex
        z-index 999
    .tab-item
        display flex
        flex 1
        flex-direction column
        align-items center
        justify-content center
        font-size 14px
        color #666
        img 
           width 35%
           margin-bottom 2px
        .on
            color red
</style>
